<template>
	<view>
		<Tips/>
		<view 
			class="header"
			:style="!showBalance ? 'top: -220rpx;border-radius: 0;' : ''"
			v-if="publicityInfo.id"
		>
			<view class="top">
				<view @click="goOutPublicityBalance">
					<MyIcons size="80rpx" :src="joinSystemPath('outBalance.png')"/>
				</view>
				<view>
					<MyIcons size="80rpx" :src="joinSystemPath('publicityBalance.png')"/>
				</view>
			</view>
			<view class="bottom_info">
				<view class="left" @click="goOutPublicityBalance">
					提现记录
				</view>
				<view class="right">
					<view class="name">宣传奖励</view>
					<view class="balance">
						<veiw class="num">
							¥{{publicityInfo.balance}}
						</veiw>
						<view class="btn" @click="isOutBalanceFun">
							提现
						</view>
					</view>
				</view>
			</view>
		</view>
		<view 
			class="show_balance_btn" 
			@click="toggleShowBalace"
			:style="!showBalance ? 'top: -226rpx' : ''"
			v-if="publicityInfo.id"
		>
			<MyIcons 
				size="50rpx" 
				:src="joinSystemPath(!showBalance ? 'toggleShow.png' : 'toggleNoShow.png')"
			/>
		</view>
		<view 
			class="code_box"
			:style="!showBalance ? 'top: -220rpx' : ''"
			v-if="publicityInfo.id"
		>
			<view class="img_bgc">
				<image
					style="width: 460rpx; height: 100%;" 
					mode="aspectFit"
					:src="joinSystemPath('publicity2.png')"/>
			</view>
			<view 
				class="code"
			>
				<image
					v-if="publicityCodeImg"
					style="width: 360rpx;" 
					mode="aspectFit"
					:src="joinPublicityCodePath(publicityCodeImg)"/>
			</view>
			<view style="position: absolute;top: 10000rpx;">
				<w-qrcode
				v-if="!publicityCodeImg"
				:options="options"
				@generate="createCodeCallback"
			></w-qrcode>
			</view>
			<view class="info" v-if="publicityCodeImg">
				帮助宿舍记账、值日、抓阄、记录公共物品等
			</view>
			<view class="new_publicity_user" v-if="publicityCodeImg">
				<view class="title">
					最新邀请的用户
				</view>
				<template v-if="publicitySuccessUserTop10.length">
					<view class="join_card" v-for="item in publicitySuccessUserTop10" :key="item.id">
						<view class="join_avatar">
							<Avatar
								:fileName="item.user.user_avatar" 
								size="60rpx"/>
						</view>
						<view class="join_center">
							<view class="top text_ellipsis">
								{{item.user.nick_name}}
							</view>
							<view class="bottom text_ellipsis">
								{{deleteLot(item.createAt)}}
							</view>
						</view>
						<view class="join_info_state">
							邀请成功
						</view>
					</view>
				</template>
				<view class="not_success_publicity" v-else>
					您还未邀请过任何人
				</view>
				<view class="footer" v-if="publicityCodeImg">
					<MyButton
						:bgc="primary_hot_color"
						:borderColor="primary_hot_color"
						:clickFun="goHelpListPage"
						width="90%"
					>查看全部邀请</MyButton>					
				</view>
			</view>
		</view>
		<view v-if="!publicityInfo.id" class="">
			<MyNull img="publicity2.png"></MyNull>
			<MyButton
				:bgc="primary_hot_color"
				:borderColor="primary_hot_color"
				:clickFun="applyPubliticy"
				width="90%"
			>一键成为宣传大使</MyButton>
		</view>
		<view 
			v-if="publicityInfo.id" 
			class="rule"
			:style="!showBalance ? 'top: calc(30vh)' : ''"
		>
			<TipInfo :color="shallow_text_color" id="8"></TipInfo>
		</view>
		<MyModal 
			:openModalFlag="modalIsOutBalanceFlag" 
			:okFun="verifySubmitOutBalance"
			:cancelFun="()=>modalIsOutBalanceFlag = -Math.random()"
			:maskClick="false"
		>
			<template #title>
				确认提现{{publicityInfo.balance}}元
			</template>
			<template #content>
				<view :style="`color:${primary_text_color}`">
					平台将会根据金额来选择[微信打款]或[支付宝打款]
				</view>
			</template>
		</MyModal>
	</view>
</template>

<script setup>
	import { 
		reactive,
		ref,
		computed,
		onUnmounted,
		nextTick
	} from "vue";
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		joinSystemPath,
		joinAvatarPath,
		joinPublicityCodePath
	} from '@/utils/imgJoinName.js'
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	import {
		deleteLot
	} from '@/utils/changeData.js'

	import {UserModel} from '@/service/model/user.js'
	
	import {
		uploadImgHook
	} from '@/hooks/uploadImg.js'
	
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import TipInfo from '@/components/TipInfo/TipInfo.vue'
	
	import { DefaultPhone } from '../../../enum/GlobalEnum'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store=userStore()
	
	const noBindPhone = computed(()=>user_store.userInfo.phone === DefaultPhone)
	
	const userModel = new UserModel()
	
	const {
		primary_hot_color,
		primary_light_color,
		primary_main_bgc,
		shallow_text_color,
		primary_text_color,
		primary_shallow_color
	} = dynamicStyle_store.dormitoryStyle	
	
	const publicityInfo = ref({})
	const publicitySuccessUserTop10=ref([])
	const showBalance=ref(true)
	const modalIsOutBalanceFlag=ref(-Math.random())
	const timer = ref(null)	
	const publicityCodeImg=ref('')
	const isPrivacy = computed(()=>user_store.userInfo.isPrivacy)
	
	const options = reactive({
		code: '',
		color: ['#EE355C'],// 二维码颜色支持渐变色 目前只支持最多10种颜色的渐变
		size: 399,
		border:{
			color: ['#EE355C'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
			opacity: 0.6, //边框透明度 默认为1不透明 0~1
			lineWidth: 3, //边框宽度
		}
	})
	
	const toggleShowBalace=()=>{
		showBalance.value = !showBalance.value
	}
	const goHelpListPage=()=>{
		uni.navigateTo({
			url:`/pages/Dormitory/helpRecord/helpRecord?type=publicity_all_success_user&publicity_id=${publicityInfo.value.id}`
		})
	}
	const isOutBalanceFun=()=>{
		uni.$emit('checkUserPrivacyProtocol')
		if(!isPrivacy.value){
		    return
		}
		modalIsOutBalanceFlag.value = Math.random()
	}
	const submitOutBalanceFun=async()=>{
		const {data,success} = await userModel.postOutPublicityBalance({},publicityInfo.value.id)
		if(success){
			uni.$emit('tips',data,'success')
			getPublicityInfoFun()
		}
	}
	const verifySubmitOutBalance=()=>{
		modalIsOutBalanceFlag.value = -Math.random()
		if(publicityInfo.value.balance<=0){
			uni.$emit('tips','余额不足，请先进行宣传','error')
			return
		}
		if(noBindPhone.value){
			uni.$emit('tips','请先绑定手机号，方便收到支付宝和打款通知','success',3000)
			uni.$emit('openPhonePopubFlag',false,true,'方便收到支付宝或微信打款通知')
			return
		}
		submitOutBalanceFun()
	}
	const applyPubliticy=async()=>{
		const {data,success} = await userModel.postApplyPublicity()
		if(success){
			uni.$emit('tips',data,'success')
			getPublicityInfoFun()
			uni.redirectTo({
				url:'/pages/User/Publicity/Publicity'
			})
		}
	}
	
	const goOutPublicityBalance=()=>{
		uni.navigateTo({
			url:`/pages/Dormitory/helpRecord/helpRecord?type=out_publicity_balance&publicity_id=${publicityInfo.value.id}`
		})
	}
	
	//更新宣传大使的二维码信息
	const updatePublicityCodeImgFun=async(code_img)=>{
		const {data,success} = userModel.postUpdatePublicityCodeImg({code_img},publicityInfo.value.id)
		publicityCodeImg.value = joinPublicityCodePath(code_img)
	}
	// 二维码创建成功
	const createCodeCallback=(res)=>{
		if(publicityCodeImg.value) return
		uploadImgHook("uploadPublicity",'/upload/publicity/code',res.img.tempFilePath)
	}
	//监听图片上传成功
	uni.$on('uploadPublicity',function(data){
		;(()=>{
			if(data){
				updatePublicityCodeImgFun(data)
			}
		})()
	})
	//获取自己大使信息
	const getPublicityInfoFun = async()=>{
		const {data,success} = await userModel.getPublicityInfoByUserId()
		if(success){
			publicityInfo.value = data
			publicityCodeImg.value=data.codeImgUrl
			options.code = `https://demo.wangxuelong.vip/dormitory/publicity?publicity_id=${data.id}&isPublicity=yes`
			getPublicitySuccessUserFun()
		}else{
			clearInterval(timer.value)
		}
	}
	
	//获取自己成功宣传的用户
	const getPublicitySuccessUserFun=async()=>{
		const limit=10,page=0,orderBy="createAt.desc"
		const {data,success} = await userModel.getPublicitySuccessUser({
			limit,
			page,
			orderBy
		},publicityInfo.value.id)
		if(success){
			publicitySuccessUserTop10.value = data
		}
	}
	
	onUnmounted(()=>{
		clearInterval(timer.value)
		uni.$off('uploadAvatar')
	})
	
	onShow(()=>{
		getPublicityInfoFun()
		timer.value=setInterval(()=>{
			getPublicityInfoFun()
		},2000)
	})
	
	onLoad(()=>{
		nextTick(()=>{
			uni.$emit('checkUserPrivacyProtocol')
		})
	})
	
	onHide(()=>{
		clearInterval(timer.value)
		uni.$off('uploadAvatar')
	})
</script>

<style lang="less">
	.header{
		background-color: v-bind(primary_hot_color);
		height: 220rpx;
		border-radius: 0 0 40rpx 40rpx;
		display: grid;
		grid-template-columns: repeat(1fr,1fr);
		position: relative;
		top: 0rpx;
		transition: all .3s;
		.top{
			display: flex;
			justify-content: space-around;
		}
		.bottom_info{
			display: flex;
			padding-bottom: 20rpx;
			font-size: 30rpx;
			.left{
				width: 50%;
				display: grid;
				grid-template-rows: repeat(1fr,1fr);
				justify-content: center;
				color: #FFFFFF;
			}
			.right{
				width: 50%;
				display: grid;
				grid-template-rows: repeat(1fr,1fr,1fr);
				color: #FFFFFF;
				.name{
					justify-self: center;
				}
				.balance{
					justify-self: center;
					display: flex;
					.btn{
						padding-left: 10rpx;
					}
				}
			}
		}
	}
	.show_balance_btn{
		width: 50rpx;
		height: 50rpx;
		position: relative;
		left: 10%;
		top: -6rpx;
		transition: all .3s;
	}
	.code_box{
		position: relative;
		top: 0rpx;
		transition: all .3s;
		.img_bgc{
			height: 300rpx;
			width: 460rpx;
			position: relative;
			left: 50%;
			transform: translate(-50%,0);
			margin-bottom: -76rpx;
			transition: all .3s;
		}
		.code{
			display: flex;
			justify-content: center;
			position: relative;
			margin-bottom: -40rpx;
			transition: all .3s;
		}
		.info{
			color: v-bind(primary_hot_color);
			width: calc(100vw);
			text-align: center;
			font-size: 30rpx;
			padding-top: 20rpx;
		}
		.new_publicity_user{
			width: calc(100vw);
			margin-top: 10rpx;
			.title{
				color: v-bind(primary_text_color);
				padding-left: 20rpx;
				margin-bottom: 10rpx;
			}
			.not_success_publicity{
				color: v-bind(shallow_text_color);
				display: flex;
				justify-content: center;
				font-size: 26rpx;
			}
			.join_card{
				margin-top: 20rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 10rpx 20rpx;
				display: flex;
				.join_avatar{
					width: 10%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
				}
				.join_center{
					width: 70%;
					color: v-bind(primary_text_color);
					font-size: 30rpx;
					.bottom{
						color: v-bind(shallow_text_color);
						font-size: 25rpx;
					}
				}
				.join_info_state{
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: v-bind(primary_hot_color);
					font-size: 30rpx;
				}
			}
		}
		.footer{
			margin-top: 20rpx;
		}
	}
	.rule{
		padding: 100rpx 0;
		position: relative;
		top: 0;
		transition: all .3s;
	}
</style>
